<template>
  <el-scrollbar v-loading="allsonglist == ''">
    <div class="songlist">
      <span class="nonetext" v-show="false">暂无歌单</span>
      <div class="info">
        <div class="songlist-container">
          <div class="songlist-header">
            <div class="songlist-header-all">全部歌单<i class="el-icon-arrow-down"></i></div>
            <div class="songlist-header-fl">
              <ul>
                <li v-for="(item,index) in songlistnameNum" :key="index"  @click="selectSongName(item.name)">{{item.name}}</li>
              </ul>
            </div>
          </div>
          <div class="songlist-main">
             <ul>
               <li v-for="(item,index) in allsonglist" :key="index"  class="imgli" @click="$router.push({path:'songlistd',query:{id:item.id}})">
                  <div class="songlist-img"><img v-lazy="item.coverImgUrl"/></div>
                  <div class="songlist-name ellipsis">
                    <p class="ellipsis">{{item.name}}</p>
                    <p class="ellipsis">by {{item.creator.nickname}}</p>
                  </div>
               </li>
             </ul>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
  import {getSonglistAll,getSonglistName} from '@/api/api'
  export default{
    data(){
      return{
        songlistnameNum:[], //歌单推荐分类
        songlistnameAll:[], //歌单分类
        allsonglist:[], //歌单列表
        songlistName: '怀旧',
      }
    },
    methods:{
      // 获取歌单分类
      _getsonglistname(){
         getSonglistName().then(res=>{
           if(res.status == 200){
             this.songlistnameNum = res.data.sub.splice(0,6);
             // console.log(this.songlistnameNum);

           }else{
             console.error("获取失败");
           }
         })
      },

      // 获取歌单列表
      _getallsonglist(tag){
        getSonglistAll(tag).then(res=>{
          if(res.status == 200){
             this.allsonglist = res.data.playlists;
             // console.log(this.allsonglist);
          }
        })
      },

      selectSongName(name){
        this.allsonglist = '';
        this._getallsonglist(name);
      }
    },
    mounted(){
      this._getsonglistname();
      this._getallsonglist("全部");
    }
  }
</script>
<style scoped="scoped">
.songlist{
  width: 100%;
  height: auto;
  padding: 0 28px;
}
.songlist-container{
  width: 100%;
  height: auto;
}
.songlist-header{
  width: 100%;
  height: 75px;
  display: flex;
  align-items: center;
}
.songlist-header .songlist-header-all{
  border: 1px solid #E8E8EA;
  font-size: 12px;
  background-color: #FFFFFF;
  padding: 2px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.songlist-header .songlist-header-all i{
  margin-left: 5px;
}
.songlist-header .songlist-header-fl{

}
.songlist-header .songlist-header-fl ul{
  display: flex;
  align-items: center;
}
.songlist-header .songlist-header-fl ul li{
  padding: 2px 20px;
  border-left: 1px solid #e1e1e2;
  font-size: 12px;
  color: #666;
}
.songlist-header .songlist-header-fl ul li:nth-of-type(1){
  border-left: 0;
}

.el-dropdown-menu{
  width: 672px;
  height: 400px;
}

.songlist-main{
  width: 100%;
  height: auto;
}
.songlist-main ul{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.songlist-main ul li{
  width: 148px;
  height: auto;
  margin-left: 20px;
  margin-bottom: 20px;
}
.songlist-main ul li:nth-of-type(6n-5){
  margin-left: 0;
}
.songlist-main ul li .songlist-img{
  width: 100%;
  height: 148px;
  overflow: hidden;
  border: 1px solid #E4E4E7;
}
.songlist-main ul li .songlist-img img{
  width: 100%;
  display: block;
}
.songlist-main ul li .songlist-name{
  width: 100%;
  height: auto;
  line-height: 28px;
  padding: 10px 0;
}
.songlist-main ul li .songlist-name p:nth-of-type(1){
  font-size: 16px;
  color: #000;
}
.songlist-main ul li .songlist-name p:nth-of-type(2){
  font-size: 12px;
  color: #999999;
}

</style>
